<template>
  <body>
  <div class="main">
    <div class="box b1"  ref="b1">
      <el-input v-model="monkeys" placeholder="游戏场最多容纳8只猴子" class="user_input"></el-input>
      <p @click="click_b1()">猴子总数</p>
    </div>
    <div class="box b2"  ref="b2">
      <el-input v-model="quitN"  class="user_input"></el-input>
      <p @click="click_b2()">危险数字</p>
    </div>
    <button class="btn" @click.prevent="goToGame()">开始游戏
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  </body>
</template>

<script>

let mxc = true
export default {
  name: "GameStart",
  created() {
    console.log("使用全局变量"+this.$user_account+"    "+this.$last_king)
  },
  data () {
    return {
      monkeys: '',
      quitN: '',
      height: {
        height: ""
      }
    }
  },
  methods: {
    click_b1(){
      if (!mxc) {
        return;
      }
      mxc = false;
        mxc = true;
        this.$refs.b1.style.transform = "rotateY(180deg)";
        this.$refs.b2.style.transform = "rotateY(0deg)";
    },
    click_b2(){
      this.$refs.b2.style.transform = "rotateY(-180deg)";
      this.$refs.b1.style.transform = "rotateY(0deg)";
    },
    goToGame(){
      this.$router.push({
        path:"/GameLoading02",
        query:{
          monkeys:this.monkeys,
          quitN:this.quitN,
          destination:'GameMain'
        }
      })
    },
    closeInput(){
      this.$message("取消输入");
      const bg = document.getElementsByClassName("main_style");
      bg[0].style.opacity = 1
    }
  }
}
</script>

<style scoped>
body {
  height: 100vh;
  background: linear-gradient(#141e30, #243b55);
}
.btn {
  color: #03e9f4;
  position: absolute;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 2px;
  height: 30px;
  left: 35%;
  bottom: -20%;
}

.btn:hover {
  border-radius: 5px;
  color: #fff;
  background: #03e9f4;
  box-shadow: 0 0 5px 0 #03e9f4,
  0 0 25px 0 #03e9f4,
  0 0 50px 0 #03e9f4,
  0 0 100px 0 #03e9f4;
  transition: all 1s linear;
}

.btn>span {
  position: absolute;
}

.btn>span:nth-child(1) {
  width: 100%;
  height: 2px;
  background: -webkit-linear-gradient(left, transparent, #03e9f4);
  left: -100%;
  top: 0px;
  animation: line1 1s linear infinite;
}
.main {
  position: relative;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  perspective: 1500px;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  transition: all 0.5s;
  backface-visibility: hidden;
  border-radius: 10px;
  cursor: pointer;
}

.box p {
  text-align: center;
  line-height: 300px;
  color: white;
}

.b1 {
  background: #de3b67;
}

.b2 {
  background: #5b9bdf;
  transform: rotateY(-180deg);
}
</style>
